<template>
  <div>
    <div class="search_wrap">
      <van-search v-model="searchText"
                  placeholder="请输入搜索关键词"
                  label="JD"
                  shape="round"
                  background="#f00"
                  show-action
                  @focus="turnSearch">
        <template #left>
          <div class="more">

          </div>
        </template>
        <template #action>
          <div>
            登录
          </div>
        </template>
      </van-search>
    </div>
  </div>
</template>
<script>
export default {
  name: "heads",
  data () {
    return {
      searchText: ""
    }
  },
  methods: {
    turnSearch () {
      this.$router.push("/search")
    }
  }
}
</script>
<style lang="less">
.search_wrap {
  .van-search__action {
    color: white;
  }
  .van-search__label {
    font-size: 25px;
    color: red;
  }
}
.more {
  width: 50px;
  height: 50px;
  margin-right: 10px;
  background: url()
    no-repeat;
  background-size: 50px 50px;
}
</style>